<template>
  <style include="cr-shared-style">
    :host {
      --profile-card-avatar-icon-size: 74px;
      --text-font-size: 1.16em;
      --scrollbar-width: 4px;
      --scrollbar-background: var(--google-grey-100);
      --footer-spacing: 40px;
      --profile-card-hover-color: var(--md-background-color);
      --profile-item-height: 178px;
      --profile-item-width: 162px;
    }

    html {
      font-family: roboto;
    }

    h2 {
      color: var(--cr-primary-text-color);
      font-size: 1.85em;
      font-weight: normal;
    }

    h3 {
      color: var(--cr-secondary-text-color);
      font-size: var(--text-font-size);
      font-weight: normal;
    }

    .profile-card-info {
      --profile-card-info-height: 52px;
      color: var(--cr-primary-text-color);
      height: 20px;
      overflow: hidden;
      position: absolute;
      text-align: center;
      text-overflow: ellipsis;
      white-space: nowrap;
    }

    .profile-card-info.prominent-text {
      font-size: var(--text-font-size);
      font-weight: 500;
      padding: 16px;
      width: 130px;
    }

    .profile-card-info.secondary-text {
      padding: 16px 10px;
      width: 142px;
    }

    .footer {
      bottom: 0;
      display: flex;
      font-size: var(--text-font-size);
      padding-bottom: var(--footer-spacing);
      padding-top: var(--footer-spacing);
      position: absolute;
      width: 100%;
    }

    .footer.division-line {
      border-top: 1px solid var(--google-grey-300);
    }

    .custom-scrollbar::-webkit-scrollbar {
      width: var(--scrollbar-width);
    }

    /* Track */
    .custom-scrollbar::-webkit-scrollbar-track {
      border-radius: var(--scrollbar-width);
    }

    /* Handle */
    .custom-scrollbar::-webkit-scrollbar-thumb {
      background: var(--scrollbar-background);
      border-radius: var(--scrollbar-width);
    }

    .profile-avatar {
      border-radius: 50%;
      flex-shrink: 0;
      height: var(--profile-card-avatar-icon-size);
      width: var(--profile-card-avatar-icon-size);
    }

    @media (prefers-color-scheme: dark) {
      :host {
        --scrollbar-background: var(--google-grey-800);
        --profile-card-hover-color: var(--google-grey-800);
      }

      .footer.division-line {
        border-top-color: var(--cr-separator-color);
      }
    }
  </style>
</template>
